<template>
    <div class="page_header">
        <div class="left">
            <!-- <iconSvg 
            :class="isBack ?  'backIcon' : 'logoIcon'" 
            :name='isBack ? "back" : "logo"' 
            :w='isBack ? "22px" : "55px"' 
            :h='isBack ? "22px" : "38px"'
            @click.native="back"
            ></iconSvg> -->
            <iconSvg
            v-if="isBack"
            class="backIcon" 
            name="back"
            w="22px"
            h="22px"
            @click.native="back"
            ></iconSvg>
            <img class="logoIcon" src="../../styles/logo.svg" v-else alt="" @click="back">
            <span :class="isBack ? 'backTitle' : 'pageTitle'"  @click="back">{{isBack ? backText: title}}</span>
        </div>
        <div v-if="centerTitleText" class="center_title">{{centerTitleText}}</div>
        <div class="filter_ewm" :style="style" v-else>
            <!-- <iconSvg name="g6change" w="20" style="color:#fff" @click.native="backToG6page('g6')"></iconSvg> -->
            <iconSvg name="filter" w="20px" h="22px" v-if="filter" @click.native="goFilter"></iconSvg>
            <iconSvg name="ewm" w="20px" h="22px" v-if="ewm && $store.state.user && $store.state.user.admin != 5" @click.native="saoMa"></iconSvg>
        </div>
        <div class="right">
            <div class="right_content" :class="centerTitleText == '' ? '': 'noLeftBorder'">
                <iconSvg name="yunwei" w="25px" h="23px" class="right_icon" v-if="is_Level_three_page" @click.native="goLevelTwoPage"></iconSvg>
                <iconSvg name="home" w="20px" h="22px" class="right_icon" @click.native="backToHomepage"></iconSvg>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '@/utils/eventBus'
export default {
    props: {
        isBack: {
            type: Boolean,
            default: false
        },
        is_Level_three_page: {
            type: Boolean,
            default: false
        },
        maxLevelThreePage: {
            type: Boolean,
            default: false
        },
        ewm: {
            type: Boolean,
            default: false 
        },
        filter: {
            type: Boolean,
            default: false 
        },
        LevelTwoPageUrl: {
            type: String,
            default: ''
        },
        hadInput: {
            type: Boolean,
            default: false
        },
        backText: {
            type: String,
            default: ''
        },
        centerTitleText: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
        }
    },
    computed: {
        title() {
            return this.$route.meta.title
        },
        style() {
            return {
                'justify-content': this.ewm ? 'space-between' : 'center'
            }
        }
    },
    inject: ["backToHomepage",'backToG6page'],

    mounted() {
        bus.$on('backHomepage', () => {
            let domain = localStorage.getItem("ssoDomain"),
                data = this.getTimes();
           if(domain){
               window.location.href =  domain + "?time=" + data
            }else{
                this.$router.push({name:'homepage',query:{time:data}});
            } 
        })
    },
    methods: {
        goFilter() {
            this.$emit('filterFn')
        },
        saoMa() {
            this.$emit('saoMa')
        },
        back() {
            if (this.isBack && !this.hadInput) {
                this.$emit('backFn')
            } else {
                bus.$emit('showConfirm')
            }
        },
        goLevelTwoPage() {
            if (!this.hadInput) {
                if (this.maxLevelThreePage) {
                    this.$router.push('/operaionManage')
                } else {
                    this.$emit('backFn')
                }
            } else {
                bus.$emit('showConfirm')
            }
        },
        // 获取时间戳
        getTimes(){
        let date = new Date().getTime().toString();
        return date;
        },
        // backToHomepage() {
        //     let domain = localStorage.getItem("ssoDomain"),
        //         data = this.getTimes();
        //     if(domain){
        //         if (!this.hadInput) {
        //             window.location.href = domain + "?time=" + data;
        //         } else {
        //             this.$emit('getIsFilterBackHome', true)
        //             bus.$emit('showConfirm')
        //         }
        //     }else{
        //         if (!this.hadInput) {
        //             this.$router.push({name:'homepage',query:{time:data}});
        //         } else {
        //              this.$emit('getIsFilterBackHome', true)
        //             bus.$emit('showConfirm')
        //         }
        //     }
        // }
    },
}
</script>

<style lang="less">
    .page_header{
        display: flex;
        height: 45px;
        line-height: 45px;
        background: #22233F;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        align-items: center;
        .left{
            text-align: left;
            flex: 1;
            position: relative;
            .logoIcon{
                width: 1.066667rem;
                height: 1.066667rem;
                margin-left: 7px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }
            .backIcon{
               position: absolute;
                left: 10px;
                top: 50%;
                transform: translate(0, -50%); 
            }
            .pageTitle,.backTitle{
                font-size: 17px;
                color: #fff;
                display: inline-block;
                vertical-align: middle;
            }
            .pageTitle{
                padding-left: 48px;
            }
            .backTitle{
                padding-left: 32px;
            }
        }
        .filter_ewm{
            width: 80px;
            display: flex;
        }
        .center_title{
            flex: 1;
            font-size: 17px;
            color: #fff;
        }
        .right{
            text-align: right;
            flex: 1;
            .right_content{
                display: inline-block;
                padding: 0 16px 0 12px;
                line-height: 45px;
                position: relative;
                &::before{
                    content: '';
                    width: 1px;
                    height: 30%;
                    background: rgba(255,255,255,0.4);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(0, -50%);
                }
                .right_icon{
                    margin-top: -2px;
                    &:not(:last-child){
                        margin-right: 5px;
                    }
                }
            }
            .noLeftBorder{
                &::before{
                    content: unset
                }
            }
        }
    }
</style>
